
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登录页面</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			.head,.foot{
				width: 100%;
				height: 60px;
			}
			.head{
				background-image: url(练习4： 仿京东商城登录页面/image/logo.png);
				background-position-x: 80px;
				background-repeat: no-repeat;
				font-size: 24px;
				color: grey;
				font-weight: bold;
				padding-left: 300px;
				padding-top: 18px;
			}
			.section{
				width: 100%;
				height: 500px;
				background-image: url(练习4： 仿京东商城登录页面/image/banner.png);
				background-repeat: no-repeat;
				background-size: 1400px 500px;
			}
			.form{
				width: 350px;
				height: 280px;
				background-color: white;
				margin-top:60px;
				margin-right: 200px;
				float: right;
			}
			.form h3{
				color:grey ;
				font-weight: lighter;
				font-size: 20px;
				padding: 10px 0px 0px 10px;
				display: inline-block;
			}
			.form a{
				float: right;
				text-decoration: none;
				display: inline-block;
				color: red;
				padding: 10px 10px 10px 10px;
			}
			img{
				float: right;
				padding: 14px 0px 10px 10px;
			}
			.clear:after{
				clear: both;
				content: "";
				height: 0;
				display: block;
			}
			#username{
				
				width: 240px;
				height: 30px;
				margin-top: 30px;
				margin-left: 50px;
				border: 1px solid grey;
			}
			.un{
			background-image: url(练习4： 仿京东商城登录页面/image/icon1.jpg);
				background-repeat: no-repeat;
				background-position: 12px 33px;
				
			}
			#password{
				width: 240px;
				height: 30px;
				border: 1px solid grey;
				margin-top: 10px;
				margin-left: 50px;
			}
			.pw{
			background-image: url(练习4： 仿京东商城登录页面/image/icon2.jpg);
				background-repeat: no-repeat;
				background-position: 12px 10px;
				
			}
			.login{
				margin: 16px 0 0 16px;
				display: inline-block;
			}
			.sub{
			color: white;
			background-color: red;
			font-size: 20px;
			width: 280px;
			height: 40px;
			margin-top: 20px;
			margin-left: 30px;
		}
		.foot div{
			text-align: center;
			color: grey;
		}
		.foot a{
			color: grey;
			text-decoration: none;
		}
		
		</style>
		
	</head>
	<body>
		<div class="head">
			欢迎登录
		</div>
		<div class="section">
			<div class="form">
			<form>
				<h3>京东会员</h3>
				<a href="#">立即注册</a>
				<img src="练习4： 仿京东商城登录页面/image/icon5.jpg" / class="clear">
				<div class="un"><input type="text" value="邮箱/用户名/已验证手机"  name="username" id="username"/></div>
				<div class="pw"><input type="password"   name="password" id="password"/></div>
				<input type="checkbox" name="login" class="login"/>自动登录
				<a class="clear" href="#">忘记密码？</a>
				<input type="submit" value="登 录" class="sub"/>
			</form>
			</div>
		</div>
		<div class="foot">
			<div><a href="#">关于我们</a>|<a href="#">联系我们</a><a href="#">人才招聘</a><a href="#">商家入驻</a><a href="#">广告服务</a><a href="#">手机京东</a><a href="#">友情链接</a>|
			<a href="#">销售联盟</a><a href="#">京东社区</a><a href="#">京东公益</a><a href="#"> English Site</a></div>
			<div>Copyright&copy;2004-2017 京东JD.com 版权所有</div>
		</div>
	</body>
</html>
